import React from "react"
import { Text, View } from "@tarojs/components"
import { Rate } from "@taroify/core"
import { Star } from "@taroify/icons"
import clsx from "clsx"

type IProps = {
  className?: string
  rate: number
  showRateText?: boolean
  renderRateText?: (rate: number) => React.ReactNode
  rateClassName?: string
  rateTextClassName?: string
}

const GpRate: React.FC<IProps> = (props: IProps) => {
  const {
    className,
    rate,
    showRateText = true,
    renderRateText,
    rateClassName,
    rateTextClassName
  } = props
  return (
    <View className={clsx("flex flex-row items-center", className)}>
      <Rate
        defaultValue={rate}
        allowHalf
        className={clsx("rate-custom-color", rateClassName)}
        emptyIcon={<Star />}
        readonly
      />
      {showRateText ? (
        renderRateText ? (
          renderRateText(rate)
        ) : (
          <Text
            className={clsx(
              "yahei font-normal text-24px text-hex-fe5900 pl-6px",
              rateTextClassName,
              "rate-text"
            )}
          >
            {rate}
          </Text>
        )
      ) : null}
    </View>
  )
}
export default GpRate
